<template>
  <div>
    <div>
      <ul>
        <li
          v-for="item in getClassify"
          :key="item.id"
          @click="goDetail(item.id, cation)"
        >
          <div class="l-img">
            <img :src="item.masterImg" alt="" />
          </div>
          <div class="l-text">
            <h3>{{ item.title }}</h3>
            <p><img src="@/assets/img/index-2.png" alt="" />{{ item.time }}</p>
            <p><img src="@/assets/img/index-3.png" alt="" />{{ item.addr }}</p>
            <p class="price">
              ￥<em>{{ item.price }}</em>
            </p>
            <div class="l-bot">
              <p>
                <span></span><span>{{ item.want }} 人想去</span>
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { onMounted, ref, computed, inject } from "vue";
export default {
  setup() {
    //首页音乐会数据变量
    const indexList = ref([]);
    const count = ref(15);
    const router = useRouter();
    const cation = ref(3);
    //首页分类变量（注入来源 Index.vue）
    const cla = inject("cla");
    const opa = inject("opa");
    //首页音乐会数据请求
    onMounted(() => {
      fetch("http://2107.wqdp.com.cn/index/music?count=" + count.value)
        .then((response) => response.json())
        .then((res) => {
          indexList.value = res.result;
        });
    });
    //首页分类变化
    const getClassify = computed(() =>
      indexList.value.filter((item) => {
        if (cla.value == 0) {
          return item;
        } else {
          return item.type == cla.value && item.open == opa.value;
        }
      })
    );

    const goDetail = (id, cation) => {
      router.push("/ticketinfo/" + id + "&" + cation);
    };

    return {
      indexList,
      count,
      getClassify,
      cla,
      opa,
      goDetail,
      cation,
      useRouter,
    };
  },

  components: {},
};
</script>

<style lang="less" scoped>
li {
  padding: 9px;
  margin: 7px auto;
  width: 357px;
  height: 181px;
  background-color: #fff;
  border-radius: 9px;
  display: flex;
  box-shadow: 0px 3px 5px 0px rgba(51, 51, 51, 0.1);
  position: relative;
  .l-img {
    width: 120px;
    height: 163px;
    img {
      width: 100%;
      height: 163px;
    }
  }
  .l-text {
    flex: 1;
    padding: 9px;
    h3 {
      width: 190px;
      font-size: 15px;
      line-height: 18px;
      margin-top: -9px;
      margin-bottom: 9px;
    }
    p {
      padding: 3px 0;
      font-size: 10px;
      color: #666666;
      img {
        margin-right: 9px;
        width: 10px;
        height: 10px;
      }
    }
    i {
      font-size: 10px;
      text-align: center;
      line-height: 20px;
      display: inline-block;
      height: 20px;
    }
    .price {
      padding: 5px 0;
      color: #f04a3a;
      font-size: 10px;
      em {
        font-size: 22px;
      }
    }
    .l-bot {
      font-size: 10px;
      color: #666666;
      position: absolute;
      bottom: 5px;
      p {
        width: 210px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
